<template>
  <el-dialog title="Delivery Address" width="800px" :visible.sync="dialogFlag" append-to-body :close-on-click-modal="false" :close-on-press-escape="false" @close="handleClose" center>
    <el-table :data="tableData" highlight-current-row @current-change="handleCurrentChange">
      <el-table-column prop="name" label="name" min-width="120"></el-table-column>
      <el-table-column prop="phone" label="contact number" min-width="140"></el-table-column>
      <el-table-column prop="email" label="email" min-width="120" show-overflow-tooltip></el-table-column>
      <el-table-column prop="zipCode" label="ZIP Code" min-width="120"></el-table-column>
      <el-table-column prop="country" label="Country" min-width="120" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.country && scope.row.country.split(',')[1] }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="state" label="State" min-width="100" show-overflow-tooltip></el-table-column>
      <el-table-column prop="address" label="address" min-width="180" show-overflow-tooltip></el-table-column>
      <!-- <el-table-column prop="operate" label="operate" min-width="130" center>
        <template slot-scope="scope">
          <el-button type="text" @click="handleEdit(scope.row)">edit</el-button>
          <el-button type="text" @click="handleDelete(scope.row)">delete</el-button>
        </template>
      </el-table-column> -->
      <el-table-column prop="isDefault" label="isDefault" min-width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.isDefault == '0'">yes</span>
          <span v-if="scope.row.isDefault == '1'">no</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="status" min-width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.status == '0'">Normal</span>
          <span v-if="scope.row.status == '1'">Disable</span>
        </template>
      </el-table-column>
    </el-table>
    <div slot="footer">
      <el-button type="primary" @click="handleConfirm">confirm</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  props: {
    flag: {
      default: false
    },
    rowInfo: {
      default: () => ({})
    }
  },
  watch: {
    flag: {
      handler (val) {
        this.dialogFlag = val
        if (val) {
          this.getAddressList()
        }
      }
    }
  },
  data () {
    return {
      currentRow: null,
      dialogFlag: false,
      tableData: []
    }
  },
  methods: {
    async getAddressList () {
      const options = {
        userId: this.$local.getItem('user').userId,
        status: '0', // 状态为正常的地址
        pageIndex: 1,
        pageSize: 100
      }
      const res = await this.$axios.post('web/address/listPage', options)
      if (res.code == 200) {
        this.tableData = res.data.items
      }
    },
    handleCurrentChange (val) {
      this.currentRow = val
    },
    handleClose () {
      this.dialogFlag = false
      this.$emit('close')
    },
    handleConfirm () {
      if (!this.currentRow) {
        this.$message.error('Please select an address information!')
        return
      }
      this.$emit('confirm', this.currentRow)
      this.handleClose()
    }
  }
}
</script>
<style lang="scss" scoped>
.w-300 {
  width: 300px;
}
.btn-box {
  width: 100%;
  display: flex;
  justify-content: center;
}
::v-deep .vue-country-intl .country-intl-label {
  box-sizing: border-box;
  padding: 0 10px;
}
::v-deep .vue-country-item {
  padding: 0 10px;
}
</style>
